<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../vue.js"></script>
</head>
<body>
  <div id="app">
    <!-- v-on的修饰符
    1.prevent:阻止默认行为,常用于form表单的submit事件
    2.stop:阻止事件传播,写在最里面的元素才有用
    3.capture:将事件传播方式改为捕获,外层的事件都要绑修饰符,不然绑了的是捕获不绑的还是冒泡
    4.self :当事件要被触发时e.target是否是自身,如果是自身就触发事件,不是就不管(事件还是在传播,但是传播到这个元素时不触发事件)
    5.once:事件只会被触发一次
    -->
    <div :style="box1css" @click.stop="fn1">这是父元素
      <div :style="box2css" @click="fn2">这是子元素</div>
      <button @contextmenu.prevent>阻止右键默认事件</button>
    </div>
    <div :style="box1css" @click.capture="fn1">这是父元素
      <div :style="box2css" @click="fn2">这是子元素</div>
    </div>
    <div :style="box1css" @click.capture="fn1">这是父元素
      <div :style="box2css" @click.capture="fn2">这是子元素
        <div style="background:yellow" @click="fn3">这是子元素里的子元素</div>
      </div>
    </div>
    <div :style="box1css" @click="fn1">这是父元素
      <div :style="box2css" @click.self="fn2">这是子元素
        <div style="background:yellow" @click="fn3">这是子元素里的子元素</div>
      </div>
    </div>
    <div :style="box1css" @click="fn1">这是父元素
      <div :style="box2css" @click="fn2">这是子元素
        <div style="background:yellow" @click.once="fn3">这是子元素里的子元素</div>
      </div>
    </div>
  </div>
  <script>
    Vue.config.productionTip = false
    const vm = new Vue({
      el:"#app",
      data(){
        return {
          msg:"hello vue",
          box1css:{
            width:'200px',
            height:'200px',
            background:'red'
          },
          box2css:{
            width:'100px',
            height:'100px',
            background:'green',
          }
        }
      },
      methods:{
        fn1(){
          console.log('父元素打印的');
        },
        fn2(){
          console.log('子元素打印的');
        },
        fn3(){
          console.log('子元素的子元素打印的');
        }

      }
    })
    </script>
</body>
</html>